<template>
    <div>
        <div style='background: #fff;padding:50px 50px 5px 50px'>
            <div class='content-head'>小程序配置</div>
            <Form ref="form" style="margin-top: 20px;width:50%" :label-width="110">
                <Form-item label="公众号appid">
                    <p slot='label'><span class='star'>*</span>公众号appid</p>
                    <Input v-model="form.appid" placeholder="微信公众号appid"></Input>
                </Form-item>
                <Form-item label="商户号">
                    <p slot='label'><span class='star'>*</span>商户号</p>
                    <Input v-model="form.mchid" placeholder="微信商户平台 - 商户号"></Input>
                </Form-item>
                <Form-item label="商户秘钥">
                    <p slot='label'><span class='star'>*</span>商户秘钥</p>
                    <Input v-model="form.key" placeholder="微信商户平台 - API安全 - 秘钥"></Input>
                </Form-item>
                <Form-item label="支付证书">
                    <p slot='label'><span class='star'>*</span>支付证书</p>
                    <Upload :action="getUrl('/home/app/plugins/payWxa/uploadCert')"
                            :format="['p12']"
                            :show-upload-list="false"
                            :on-format-error="handleFormatError"
                            :headers="uploadHeaders()"
                            :on-success="handleSuccess"
                            >
                        <Button type="ghost" icon="ios-cloud-upload-outline">上传文件 
                            <span v-if="p12">( 证书已上传, 重新上传可替换 ) </span>
                        </Button>
                    </Upload>
                    <Row>
                        微信商户平台，微信支付API证书apiclient_cert.p12
                    </Row>
                </Form-item>
                <Form-item>
                    <div class='btn btn-hover' @click='submit'>保存</div>
                </Form-item>
            </Form>
        </div>
        <div style='background: #fff;padding:50px 50px 5px 50px;margin-top: 16px;'>
            <div class='content-head'>支付回调</div>
            <Form ref="formItem" style="width:50%" :label-width="100">
                <FormItem label='分组'>
                    <p slot='label'><span class='star'>*</span>分组</p>
                    <Select v-model='formItem.class_id' @on-change='selectFun' >
                        <Option v-for="item in configData" :value="item.id" :key="item.id">{{ item.name }}</Option>
                    </Select>
                </FormItem>
                <FormItem label='函数'>
                    <p slot='label'><span class='star'>*</span>函数</p>
                    <Select v-model='formItem.function_id' >
                        <Option v-for="item in funData" :value="item.id" :key="item.id">{{ item.name }}</Option>
                    </Select>
                </FormItem>
                <Form-item>
                    <div class='btn btn-hover' @click='payCall'>保存</div>
                </Form-item>
            </Form>
        </div>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                form: {
                    appid:'',
                    mchid: '',
                    key: ''
                },
                p12: false,
                formItem: {
                    class_id:0,
                    function_id:0
                },
                configData:[],
                funData:[]
            }
        },
        created(){
            this.getConfig();
            //获取分组信息
            this.fetch('/home/app/auth/class').then(res=>{
                if(res&&res.data.data&&res.data.code){
                    this.configData = res.data.data;
                }
            })
        },
        methods: {
            getConfig(){
                this.fetch('/home/app/plugins/payWxa/config').then((res) => {
                    if (res && res.data.data) {
                        let data = res.data.data;
                        if(data.certificate){
                            this.p12 = true;
                        }
                        this.form.appid = data.appid;
                        this.form.mchid = data.mchid;
                        this.form.key = data.key;

                        this.formItem.class_id = data.class_id;
                        this.formItem.function_id = data.function_id;
                    }
                });
            },
             //获取函数
            selectFun(classId){
                if(classId){
                    //选择函数
                    this.fetch('/home/app/engine/schedule/classId/'+classId).then(res=>{
                        if(res&&res.data.data&&res.data.code){
                            this.funData = res.data.data;
                            if(!this.funData.length){
                                this.$Message.warning('该分组下无函数')
                            }
                        }
                    })
                }
                
            },
            submit(){
                if(!this.form.appid){
                    this.$Message.warning('请填写微信公众号appid')
                    return
                }
                if(!this.form.mchid){
                    this.$Message.warning('请填写商户号')
                    return
                }
                if(!this.form.key){
                    this.$Message.warning('请填写商户密钥')
                    return
                }
                if(!this.p12){
                    this.$Message.warning('请上传支付证书')
                    return
                }
                
                this.fetch('/home/app/plugins/payWxa/config', this.form).then((res) => {
                    if (res && res.data.data) {
                        this.$Message.success('保存成功')
                        this.getConfig();
                    }
                });
            },
            //回调
            payCall(){
                if(!this.formItem.class_id){
                    this.$Message.warning('请选择分组')
                    return
                }
                if(!this.formItem.function_id){
                    this.$Message.warning('请选择函数')
                    return
                }
                this.fetch('/home/app/plugins/payWxa/payCall', this.formItem).then((res) => {
                    if (res && res.data.data) {
                        this.$Message.success('保存成功')
                        this.getConfig();
                    }
                });
            },
            handleFormatError (file) {
                this.$Notice.warning({
                    title: '文件格式不正确',
                    desc: '文件 ' + file.name + ' 格式不正确，请上传 微信支付证书 apiclient_cert.p12'
                });
            },
            handleSuccess (res, file, fileList) {
                this.p12 = true;
                if (fileList.length >= 2) {
                    fileList.shift();
                }
            }
        }
    }
</script>